<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>今日计划</title>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">


    <style type="text/css">
        .table {
            margin-top: 0px;
            margin-bottom: 0px;
            color: rgb(51, 51, 51);
            border-left: 1px solid #DEDEDE !important;
            border-top: 1px solid #DEDEDE !important;
            border-right-width: 0px !important;
            border-bottom-with: 0px !important;
        }

        .table td, .table th {
            margin-top: 0px;
            margin-bottom: 0px;
            color: rgb(51, 51, 51);
            border-right: 1px solid #DEDEDE !important;
            border-bottom: 1px solid #DEDEDE !important;
            border-left-width: 0px !important;
            border-top-with: 0px !important;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            vertical-align: middle;
            padding: 0;
            height: 24px;
            line-height: 100%;

        }

        table .td-title {
            background-color: #f8f8f8;
            line-height: 24px;
            font-weight: bold;
        }

        table .td-title2 {
            line-height: 24px;
            font-weight: bold;
        }

        table .td-module {
            background-color: #f8f8f8;
            line-height: 24px;
            font-weight: bold;
        }

        .table > tbody > tr > td.td-row2 {
            height: 56px;
            line-height: 20px;
            max-height: 56px;
            overflow: hidden;
        }

        .table > tbody > tr > td.td-row2 span {
            max-height: 44px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .table > tbody > tr > td.td-row3 {
            height: 56px;
            line-height: 18px;
            max-height: 56px;
            overflow: hidden;
        }

        .table > tbody > tr > td.td-row3 span {
            max-height: 56px;
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        .td-value span.lineOne {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        input[type=text], input[type=tel], input[type=number], select {
            box-sizing: border-box;
            border-width: 0px;
            border-style: none;
            padding-right: 0px !important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            margin-left: 0px !important;
            margin-right: 0px !important;
            margin-top: 0px !important;
            margin-bottom: 0px !important;
            padding-left: 6px;
        }

        input[type=text], input[type=tel], input[type=number], select {
            height: 24px;
            width: 100%;
            border: none;
            outline: none;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table .td-value span, .table .td-value input[type="text"], .td-value {
            vertical-align: middle;
            word-wrap: break-word;
            color: #2a8cec !important;
        }

        textarea {
            height: 56px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            padding-top: 20px;
            padding-left: 6px;
        }

        .width90 {
            width: 96px;
        }

        .width100 {
            width: 170px;
            overflow: hidden;
            word-wrap: break-word;
        }

        .width120 {
            width: 180px;
        }

        .width92 {
            width: 102px;
        }

        .width120 {
            width: 160px;
        }

        .width95 {
            width: 89px;
        }

        .width93 {
            width: 96px;
        }

        .width60 {
            width: 60px;
        }

        .span-a-btn {
            position: absolute;
            right: 10px;
            margin-right: 19px;
        }

        .userbox {
            border: 1px #BBBBBB solid;
            background-color: White;
            width: 99%;
            overflow: hidden;
        }

        div.userbox {
            min-height: 21px;
            padding-left: 6px;
            padding-top: 6px;
            height: auto;
        }

        input.userbox {
            height: 21px;
            padding-left: 6px;
            line-height: 21px;
        }

        .userbox input {
            border-width: 0px;
            border-style: none;
            width: 280px;
        }

        .user {
            height: 20px;
            line-height: 20px;
            max-height: 20px;
            float: left;
            text-align: left;
            min-width: 32px;
            padding-left: 1px;
            overflow: hidden;
            cursor: pointer;
        }

        .user:hover {
            background-color: #cfd4d1;
        }

        .userbox .over.user {
            background-color: #cfd4d1;
        }

        .userbox .select.user {
            color: #fff;
            background-color: #045B9E;
        }

        .saveModle {
            width: 500px;
            height: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -150px;
            background: #fff;
            border-radius: 10px;
            z-index: 1978;
            display: none;
            border: 1px solid #cfcfcf;
        }

        .saveModle .top {
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            padding-left: 7px;
            border-bottom: 1px solid #cfcfcf;
            background: #fff;
        }

        .saveModle .top .title {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            float: left;
            background: #fff;
        }

        .saveModle .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            display: inline-block;
            float: right;
        }

        .saveModle .top .btn:hover {
            color: red;
        }

        .saveModle .saveBtn {
            margin: 0 auto;
            margin-top: 35px;
            display: block;

        }

        .modleBj {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 1977;
            background: #DCE2F1;
            filter: alpha(opacity=60);
            opacity: .6;
            display: none;
        }

        #modal {
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 999;
            background-color: white;
        }

        .td-value {
            text-align: left !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: #2a8cec !important;
        }

        .td-value span {
            display: inline-block;
            max-height: 56px;
            overflow: hidden;
            padding: 0 6px;
            word-wrap: break-word;
        }

        .td-value1 {
            text-align: center !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: #2a8cec !important;
        }

        .td-value1 input {
            text-align: center;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .table-bordered tbody tr:last-child td {
            border-bottom-color: transparent !important;
        }

        .lastTable tbody tr:last-child td {
            border-bottom-color: #cbcbcd !important;
        }

        .tableTomorrow input, .tableTomorrow select {
            background: #fafafa;
        }

        .tableTomorrow input, .tableTomorrow td {
            background: #fafafa;
        }

        .divSelect {
            width: 100px;
            border: 1px solid #DEDEDE;
            margin-left: 10px;
            float: left;
        }

        #entourage input:hover {
            background-color: #e6f2fa;
        }

        .table-no-border-left {
            border-left-width: 0px !important;
        }

        .table-width-auto {
            width: 33.5% !important;
        }

        .btn-blue.focus, .btn-blue:focus, .btn-blue:hover {
            color: #fff;
            text-decoration: none;
        }

        .btn-blue {
            border: none;
            background: #2a8ced;
            color: #fff;
            font-size: 0.22rem;
            height: 0.58rem;
            width: 14%;
        }

        .table-bottom-width {
            border-bottom-width: 0px !important;
        }

        .saveAddress {
            width: 100%;
            height: 205px;
            position: fixed;
            left: 0;
            top: 100px;
            background: #fff;
            border-radius: 10px;
            z-index: 1978;
            display: none;
            border: 1px solid #cfcfcf;
        }
        .saveModle{
            width: 500px;
            height: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -150px;
            background: #fff;
            border-radius: 10px;
            z-index: 1978;
            display: none;
            border: 1px solid #cfcfcf;
        }

        .saveModle .top,.saveAddress .top{
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            /* padding-left: 7px; */
            border-bottom: 1px solid #cfcfcf;
            background: #f5f5f5;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .saveModle .top .title,.saveAddress .top .title  {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            /* float: left; */
            background: #F5F5F6;
            text-align: center;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .saveModle .top .btn,.saveAddress .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            position: absolute;
            right: 0;
            top: 0px;
        }

        .saveModle .top .btn:hover,.saveAddress .top .btn:hover{
            color: red;
        }

        .saveModle .saveBtn{
            margin: 0 auto;
            margin-top: 35px;
            display: block;
        }
        .saveAddress .saveBtn{
            margin: 0 auto;
            display: block;
            margin-top: 5px;
        }
        .addressTitle{
            float: left;
            width: 80px;
            box-shadow: 0 0 black;
            line-height: 30px;
        }
        input.addressValue{
            float: left;
            width: 100%;
            border: 1px solid #ddd;
            height: 30px;
        }
        .form-group{
            margin-bottom: 0  !important;
        }

        .modleBj {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 1977;
            background: #DCE2F1;
            filter: alpha(opacity=60);
            opacity: .6;
            display: none;
        }
    </style>
    <script src="/dist/js/pages/wreport/service.js?t=42e28def"></script>
    <script src="/dist/js/pages/wreport/Template.js?t=42e28def"></script>

</head>
<body>
<section id="app" v-cloak>
    <div class="model-picker-dropdown">
        <div class="model-select-wrap">
            <div class="model-select-tab">
                <a class="active" data-count="type">省</a><a class="" data-count="brand">市</a><a data-count="model"
                                                                                                class="">县</a>
            </div>
            <div class="model-select-content">
                <div class="model-select type shen" data-count="type" style="display: block;">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="(item,i) in provinceList">{{item.name}}</a>
                    </dl>
                </div>
                <div class="model-select brand" data-count="province">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="(item,i) in cityList">{{item.name}}</a>
                    </dl>
                </div>
                <div class="model-select model" data-count="model">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="(item,i) in countyList">{{item.name}}</a>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="td-value1"
         style="width: 114px;height: auto; margin-left: 0px;display: none;position: absolute;z-index:999; border: 1px solid #cbcbcd; !important;margin-left: 0px;background-color: white"
         id="entourage">
        <input v-for="(item,i) in entourage" type="text"
               style="margin:0;text-align: left;width: 100%;cursor: pointer;line-height: 24px;color:#2a8cec;"
               v-model="item.name" @click="addEntourage(item.name)">
    </div>
    <table class="table text-center table-bottom-width" v-if="roleName=='区域经理'">

        <tr>
            <td colspan="6" class="td-module">今日计划
                <span class="span-a-btn" v-if="pageType=='edit'">
                <a href="javascript:void(0);" class="a-btn"
                   @click="addRow('tomorrowVisitPlan2','AddTomorrowVisitPlan')">添加一行</a>
                <a href="javascript:void(0);" class="a-btn"
                   @click="delRow('tomorrowVisitPlan2')">删除一行</a>
                </span>
            </td>
        </tr>
    </table>
    <table
            style="border-top-width: 0px !important;"
            v-if="roleName=='区域经理'" class="table text-center">
        <tr>
            <th style="width: 20%;">拜访目的</th>
            <th style="width: 20%;">客户姓名</th>
            <th style="width: 20%;">陪同人员</th>
            <th style="width: 40%;">地点</th>
        </tr>
        <tr v-for="(item,i) in list">
            <td class="td-value1" style="width: 20%;">
                <select v-if="pageType=='edit'" v-model="item.visitGoal" style="background-color: white">
                    <option v-for="option in visitGoalList" v-bind:value="option.value">
                        {{option.text}}
                    </option>
                </select>
                <span v-else>{{item.visitGoal}}</span>
            </td>
            <td class="td-value1" style="width: 20%;">
                <input type="text" v-if="pageType=='edit'" v-model="item.customerName" v-line-inserted="i"
                       class="txtParent" @click="onfocus1(i)">
                <span v-else>{{item.customerName}}</span>
            </td>
            <td class="td-value1" style="width: 20%;">
                <input type="text" v-if="pageType=='edit'" v-model="item.entourage" v-line-inserted="i"
                       id="'entourage'+i" class="visitGoalShow" @click="onfocus1(i),getEntourage($event,i,'tomorrowVisitPlanRegion')" readonly >
                <span v-else>{{item.entourage}}</span>
            </td>
            <td class="td-value1" style="width:40%;">
                <input type="text" v-if="pageType=='edit'" v-model="item.customerAddress">
                <span v-else>{{item.customerAddress}}</span>
            </td>
        </tr>
    </table>
    <table class="table text-center table-bottom-width" v-if="roleName=='大区经理'">

        <tr>
            <td colspan="6" class="td-module">今日计划
                <span class="span-a-btn" v-if="pageType=='edit'">
                <a href="javascript:void(0);" class="a-btn"
                   @click="addRow('tomorrowVisitPlan2','AddTomorrowVisitPlan')">添加一行</a>
                <a href="javascript:void(0);" class="a-btn"
                   @click="delRow('tomorrowVisitPlan2')">删除一行</a>
                </span>
            </td>
        </tr>
    </table>
    <table style="border-top-width: 0px !important;" v-if="roleName=='大区经理'" class="table text-center">
        <tr>
            <th style="width: 20%;">拜访目的</th>
            <th style="width: 20%;">客户名称</th>
            <th style="width: 20%;">陪同人员</th>
            <th style="width: 40%;">地点</th>
        </tr>
        <tr v-for="(item,i) in list">
            <td class="td-value1" style="width: 20%;">
                <select v-if="pageType=='edit'" v-model="item.visitGoal" style="background-color: white" @change="clearData(i)">
                    <option v-for="option in visitBigGoalList" v-bind:value="option.value">
                        {{option.text}}
                    </option>
                </select>
                <span v-else>{{item.visitGoal}}</span>
            </td>
            <td class="td-value1" style="width: 20%;">
                <input type="text"  v-model="item.customerName"
                       v-line-inserted="i" v-if="pageType=='edit'"
                       class="txtParent" >
                <span v-else>{{item.customerName}}</span>
            </td>
            <td class="td-value1" style="width: 20%;">
                <input type="text" :id="'entourage'+i" class="visitGoalShow" v-if="pageType=='edit'"
                       v-model="item.entourage" @click="onfocus1(i),getEntourage($event,i)" readonly>
                <span v-else>{{item.entourage}}</span>
            </td>
            <td class="td-value1" style="width:40%;">
                <input type="text" v-if="pageType=='edit'" readonly @click="openAddress(i)"  v-model="item.customerAddress">
                <span v-else>{{item.customerAddress}}</span>
            </td>

        </tr>
    </table>
    <div style="text-align:center;padding: 10px 0" class="div-btn">

        <input type="button" style="width:100px;margin-top: 10px;"
               value="提交"
               class="btn oaBtn btn-xs" @click="add()"/>
    </div>
    <div class="saveAddress">
        <div class="top">
            <div class="title">客户所在地</div>
            <div class="btn" v-on:click="closeAddress"> x</div>
        </div>
        <div class="header box-body" style="padding: 5px 20px;padding-bottom: 0;">

            <div class="form-group" style="overflow: hidden">
                <div class="addressTitle" style="letter-spacing: 3px;" >客户所在县</div>
                <input type="text" class="addressValue xianValue selectModel" readonly placeholder="请选择县">
            </div>
            <div class="form-group" style="overflow: hidden">
                <div class="addressTitle">客户详细地址</div>
                <input type="text" class="addressValue xianxiValue">
            </div>
        </div>
        <input type="button" value="确定" class="saveBtn btn oaBtn" @click="saveAddressBtn">
    </div>
    <div class="modleBj"></div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=0b5caf39"></script>
<script src="/dist/js/oaApp.js"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=0c4d95a9"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("body").on("click", ".td-value", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", ".visitGoalShow", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
            $("#entourage").hide();
        });
        $("body").on("click", ".selectModel", function (e) {
            if ($(".model-picker-dropdown").is(":hidden")) {
                $(".model-picker-dropdown").css({
                    "width":"275px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".model-picker-dropdown").hide();
            }
        });
        $("body").on("click", ".model-select-tab a", function (e) {
            $(this).parent().find("a").removeClass("active");
            $(this).addClass("active");
            var boxName = $(this).attr("data-count");
            $(".model-select").hide();
            $(".model-select-content" + " ." + boxName).show();
        });
        $("body").on("click", ".model-select  a", function (e) {
//            if ($(this).hasClass("active")) {
//                return false;
//            }
            $(this).parent().find("a").removeClass("active");
            var id = $(this).attr("attr-id");
            $(this).addClass("active");
            var val = $(this).text();
            if ($(this).parents(".model-select").hasClass("type")) {
                $(".model-select-tab a").removeClass("active");
                $(".model-select-tab a[data-count=brand]").addClass("active");
                $(".model-select").hide();
                $(".xianValue").attr("data-shen",val);
                app.getCity(id);
                $(".model-select-content .brand").show();

            } else if ($(this).parents(".model-select").hasClass("brand")) {
                $(".model-select-tab a").removeClass("active");
                var id = $(this).attr("attr-id");
                $(".model-select-tab a[data-count=model]").addClass("active");
                $(".model-select").hide();
                $(".xianValue").attr("data-shi",val);
                app.getCounty(id);
                $(".model-select-content .model").show();

            } else {
                $(".xianValue").attr("data-xian",val);
                $(".xianValue").val($(".xianValue").attr("data-shen")+"-"+$(".xianValue").attr("data-shi")+"-"+$(".xianValue").attr("data-xian"));
                $(".model-picker-dropdown").hide();
            }
        })
        $("body").on("click", ".model-picker-dropdown", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".model-picker-dropdown").hide();
        });
    });

</script>
<script type="text/javascript">
    console.log(urlConfig);
    var app = new Vue({
        el: '#app',
        data: {
            entourage: [],
            currentfocus: 0,
            pageType: "edit",
            roleName: "",
            visitGoalList: [
                {text: '首次拜访', value: '首次拜访'},
                {text: '重复拜访', value: '重复拜访'},
                {text: '意向跟踪', value: '意向跟踪'},
                {text: '扫村扫街', value: '扫村扫街'}
            ],
            visitBigGoalList: [
                {text: '意向跟踪', value: '意向跟踪'},
                {text: '陪同跑动', value: '陪同跑动'},
                {text: '其它', value: '其它'},
                {text: '扫村扫街', value: '扫村扫街'}
            ],
            list: [],
            provinceList:[],
            cityList: [],
            countyList:[]
        },
        methods: {
            onfocus1: function (i) {
                var that = this;
                that.currentfocus = i;
            },
            addRow: function (prop, template) {
                this.list.push(new Template[template]());
            },
            delRow: function (prop) {
                this.list.splice(this.list.length - 1, 1);
            },
            clearData: function (i) {
                this.list[i].customerName = "";
            },
            showDivEntourage: function (event) {
                console.log(event)
                $("#entourage").css({
                    "left": event.pageX,
                    "top": (event.pageY ) + "px"
                }).show();
            },
            getEntourage: function (event, i) {
                var that = this;
                var visitGoal = that.list[i].visitGoal
                if (visitGoal == '陪同跑动'||visitGoal == '意向跟踪'||visitGoal == '其它'||visitGoal == '首次拜访'||visitGoal == '重复拜访'||visitGoal == '扫村扫街') {
                    var inputId = '#entourage' + i
                    $(inputId).attr("readonly", "readonly");
                    that.showDivEntourage(event);
                }

            },
            addEntourage: function (a) {
                var that = this;
                that.list[that.currentfocus].entourage = a;
                $("#entourage").hide();
            },
            openAddress :function(index){
                $(".modleBj").show();
                $(".saveAddress").show();
                $(".saveAddress").attr("data-index",index);
                $(".xianValue").val("");
                $(".xianxiValue").val("");
            },closeAddress: function () {
                $(".modleBj").hide();
                $(".saveAddress").hide();
            },
            saveAddressBtn:function () {
                var xian=$(".xianValue").attr("data-xian");
                var xianxi=$(".xianxiValue").val();
                var index=$(".saveAddress").attr("data-index");
                if(xian==''){
                    alert("请选择客户所在县");
                    return false;
                }
                if(xianxi==''){
                    alert("请填写客户详细地址");
                    return false;
                }
                app.list[index].customerAddress=xian+xianxi;
                console.log(xian+xianxi)
                $(".modleBj").hide();
                $(".saveAddress").hide();
            },
            getCity: function (id) {
                var that = this;
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': id}, function (r) {
                    that.cityList = r.records;
                })
            }
            ,
            getCounty: function (id) {
                var that = this;
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': id}, function (r) {
                    console.log(r);
                    that.countyList = r.records;
                })

            },
            add: function () {
                console.log(this.list)
                var that=this;
                var num=0;
                if (that.roleName == "区域经理" || that.roleName == "大区经理"||that.roleName == "区域总监") {
                    for (var i = 0; i < that.list.length; i++) {
                        if (that.list[i].customerName != "" || that.list[i].customerAddress != "" || that.list[i].visitGoal) {
                            if (that.list[i].customerName == "") {
                                alert("请填写客户名称！");
                                return false;
                            }
                            if (!that.list[i].visitGoal&&that.list[i].customerName!="请假") {
                                alert("请选择拜访目的！");
                                return false;
                            }
                            if(that.roleName == "大区经理"||that.roleName == "区域总监"){
                                if (!that.list[i].entourage&&that.list[i].customerName!="请假") {
                                    alert("请选择陪同人员！");
                                    return false;
                                }
                            }
                            if (that.list[i].customerAddress == ""&&that.list[i].customerName!="请假") {
                                alert("请填写客户地点！");
                                return false;
                            }
                            num++;

                        }
                    }
                    if(that.roleName == "区域经理" &&num<3){
                        if(that.list[0].visitGoal!="意向跟踪"&&that.list.customerName!="请假"){
                            alert("请至少填写3条计划！");
                            return false;
                        }
                    }
                    if(that.roleName == "大区经理" &&num<1){
                        alert("请至少填写1条计划！");
                        return false;
                    }
                    if(that.roleName == "区域总监" &&num<1){
                        alert("请至少填写1条计划！");
                        return false;
                    }


                }
                if (that.roleName == "大客户经理") {
                    for (var i = 0; i < that.list.length; i++) {
                        if (that.list[i].customerName != "" || that.list[i].customerAddress != "" || that.list[i].lastVisitTime != "" || that.list[i].customerIndustry != "" || that.list[i].intentionDevice != "") {
                            if (that.list[i].customerName == "") {
                                alert("请填写客户名称！");
                                return false;
                            }
                            if (that.list[i].customerAddress == "") {
                                alert("请填写客户地点！");
                                return false;
                            }

                            if (that.list[i].customerIndustry == "") {
                                alert("请填写客户行业！");
                                return false;
                            }
                            if (that.list[i].intentionDevice == "") {
                                alert("请填写意向设备！");
                                return false;
                            }
                        }
                    }
                }

                var obj = {
                    dialog:'show'
                }
                prompt(JSON.stringify(obj))
                $.wyui.postMethod('/tomorrowPlan/save.json', trimRN(this.list), function (r) {
                    console.log(r);
                    alert("提交成功")
                    var obj = {
                        activity:'closePage'
                    }
                    prompt(JSON.stringify(obj))
                })
            }
        },

        mounted: function () {
            var that = this;
            var obj = {
                dialog:'show'
            };
            $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': '0'}, function (r) {
                console.log(r);
                that.provinceList = r.records;
            })
            prompt(JSON.stringify(obj));
            $.wyui.postMethod('/user/getUserViewById.json', {id: getUrlParamObj().userId}, function (r) {
                console.log(r);
                that.roleName = r.roleName;
            });
            $.wyui.postMethod('/tomorrowPlan/getByUserIdAndDateTime.json', {userId: getUrlParamObj().userId}, function (r) {
                console.log(r);
                that.list = reportCountFixed(r);
            });
            $.wyui.postMethod('/user/getEntourage.json', {userId: getUrlParamObj().userId}, function (r) {
                that.entourage = r;
            });
            var obj = {
                dialog:'remove'
            };
            prompt(JSON.stringify(obj))
        }

    });
    function renderLines(el, lineIndex) {

        $(".txtParent").eq(lineIndex).autoComplete({
            url: server.ip + "/weekPlan/getNameAndTel.json",
            render: function (r, panel) {
                for (var i = 0; i < r.length; i++) {
                    $("<li></li>").data("autoComplete",
                        r[i]).html("<a>" + r[i].customerName + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + r[i].customerTel + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (r) {
                app.list[app.currentfocus].customerName = r.customerName;
                app.list[app.currentfocus].customerAddress = r.customerAddress;
                app.list[app.currentfocus].lastVisitTime = r.lastVisitTime;
                app.list[app.currentfocus].customerIndustry = r.customerIndustry;
                app.list[app.currentfocus].intentionDevice = r.intentionDevice;
                return false;
            },
            extraParams: {createUserId: getUrlParamObj().userId},
            height: 210,
            width: 300
        });
    }

    Vue.directive('line-inserted', {
        inserted: function (el, binding) {
            console.log(el);
            var lineIndex = binding.value;
            renderLines(el, lineIndex);
        }
    });
    function reportCountFixed(report) {
        for (var i = report.length; i < 3; i++) {
            report.push(new Template.AddTomorrowVisitPlan());
        }
        return report;
    }
</script>

</body>
</html>